@mixin btnStyle {
  @apply h-9 leading-9 text-center text-sm;
  width: 5.5rem;
  border-radius: 2.75rem;
}

.program {
  @apply w-full mt-4;

  .itemDate {
    @apply w-full h-full leading-10 text-sm sticky bg-bg text-c99;
    top: 0.5625rem;
  }

  .programItem {
    @apply w-full rounded-lg bg-bg25;

    .programChild {
      @apply w-full flex items-center justify-between;

      &:hover {
        @apply cursor-pointer;
        background-color: #2e2e2e;
      }

      height: 5.25rem;

      &:not(:last-child) {
        border-bottom: 0.0625rem solid #2e2e2e;
      }

      padding: 0 1.875rem;

      .childLeft {
        @apply overflow-hidden text-ellipsis;
        width: 6.25rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        & > div:first-child {
          @apply text-white text-lg;
          font-weight: OPPOsans;
          line-height: 1.625rem;
          margin-bottom: 0.375rem;
        }

        & > div:last-child {
          @apply text-sm leading-5;
          color: #ccc;
        }
      }

      .childMiddle {
        @apply flex-1 flex items-center justify-center text-base text-white;

        .mainMain {
          @apply flex items-center;

          .img {
            @apply w-9 h-9 mr-5;
            margin-left: 1.125rem;
            border-radius: 50%;
          }

          .core {
            @apply text-center font-bold text-lg font-bold;
            min-width: 2.0625rem;
            font-family: OPPOSans;

            &.coreLive {
              @apply text-theme;
            }
          }

          .noStart {
            @apply text-sm;
            color: #339cff;
            margin: 0 2.75rem;
          }

          .statusLive {
            @apply text-sm text-theme;
            margin: 0 2.75rem;
          }

          .ended {
            @apply text-sm;
            color: rgba(255, 255, 255, 0.6);
            margin: 0 2.75rem;
          }
        }

        .middleTeam {
          @apply flex-1 text-left overflow-hidden text-ellipsis;
          min-width: 2.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }

      .childRight0 {
        @include btnStyle;
        color: #339cff;
        border: 1px solid #339cff;

        &:hover {
          @apply text-white border-0;
          background-color: #339cff;
        }
      }

      .childRight1 {
        @apply text-theme;
        @include btnStyle;
        border: 1px solid var(--theme-color);

        &:hover {
          @apply text-white border-0 bg-theme;
        }
      }

      .childRight2 {
        @include btnStyle;
        color: #ffb60c;
        border: 1px solid #ffb60c;

        &:hover {
          @apply text-white border-0;
          background-color: #ffb60c;
        }
      }

      .childRight3 {
        @apply cursor-default;
        @include btnStyle;
        color: #9b9b9b;
        border: 1px solid #9b9b9b;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .program {
    @apply my-0 mx-auto;
    width: calc(100% - 2rem) !important;
    margin-top: 0 !important;

    .itemDate {
      @apply text-center mb-0;
      height: 2.375rem;
      line-height: 2.375rem;
      top: -0.0625rem;
    }

    .programItem {
      border-radius: 0 !important;
      background-color: transparent !important;

      .programChild {
        @apply bg-bg25;
        border: none !important;
        border-radius: 0.375rem !important;
        height: 5.25rem !important;
        margin-bottom: 0.625rem;
        padding: 0 !important;

        .itemPhone {
          @apply w-full h-full flex items-center justify-between px-3;

          .date {
            width: 4.5625rem;

            & > p:first-child {
              @apply text-sm font-bold text-white mb-1;
              line-height: 1.3125rem;
            }

            & > p:last-child {
              @apply text-xs;
              line-height: 0.9375rem;
              color: rgba(255, 255, 255, 0.6);
            }
          }

          .itemCenter {
            @apply flex items-center;

            .team {
              @apply mr-4 text-sm text-white;

              .name {
                @apply inline-block;
                width: 6.25rem;
              }

              & > div {
                @apply flex items-center;

                &:first-child {
                  @apply mb-2;
                }

                .img {
                  width: 1.375rem;
                  height: 1.375rem;
                  border-radius: 50%;
                  margin-right: 0.375rem;
                }
              }
            }

            .score {
              @apply font-bold text-sm w-6 overflow-hidden;
              font-family: OPPOSans;
              line-height: 1.3125rem;

              & > p {
                @apply w-full text-white;
                height: 1.375rem;
                line-height: 1.375rem;
              }
            }
          }

          .phoneStatus0 {
            @apply shrink-0 text-xs flex items-center;
            line-height: 0.9375rem;
            color: #339cff;

            & > img {
              width: 0.8125rem;
              height: 0.8125rem;
              margin-right: 0.1875rem;
            }
          }

          .phoneStatus1 {
            @apply shrink-0 text-xs text-theme;
            line-height: 0.9375rem;
          }

          .phoneStatus2 {
            @apply shrink-0 text-xs;
            line-height: 0.9375rem;
            color: #989898;
          }
        }
      }
    }
  }
}
